<template>
  <view :style="colorStyle">
    <view class="infobox1">
      <view
        class="list flex aitems"
        v-for="(item, index, key) in refundinfo"
        :key="key"
      >
        <image :src="item.goods.img" class="img" mode="aspectFill"></image>
        <view class="block1 flex column between">
          <view class="info1 c1F1F1F f32 fontWeight ellipsis2">
            {{ item.goods.name }}
          </view>
          <!-- <view class="info2 c858585 f24"> 数量：X{{item.goods.goodsNum}} </view> -->
          <view class="info3 c858585 f24">
            {{
              item.goods.goodsSpec
                .replace(/{/g, "")
                .replace(/}/, "")
                .replace(/"/g, "")
            }}
          </view>
        </view>
      </view>
    </view>
    <view class="infobox2">
      <view class="block1 c1F1F1F f32 fontWeight"> 售后类型 </view>
      <view
        class="block2 flex aitems"
        @click="gourl(`/pages/refund/applaySave?type=1`)"
      >
        <image src="@/static/img38.png" class="img" mode=""></image>
        <view class="info1">
          <view class="tip1 c1F1F1F f28"> 我要退款(无需退货) </view>
          <view class="tip2 c858585 f24"> 未收到货，或与平台协商之后申请 </view>
        </view>
      </view>
      <view
        class="block2 flex aitems"
        v-if="
          orderinfo.orderStatus == 2 ||
          orderinfo.orderStatus == 3 ||
          orderinfo.orderLogisticsList.length !== 0
        "
        @click="gourl(`/pages/refund/applaySave?type=2`)"
      >
        <image src="@/static/img39.png" class="img" mode=""></image>
        <view class="info1">
          <view class="tip1 c1F1F1F f28"> 我要退货退款 </view>
          <view class="tip2 c858585 f24"> 已收到货，需要退还已收到的货物 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { getStorage } from "../../utils/storage";
import { go } from "../../utils/wxAPI";
export default {
  mixins: [colors],
  data() {
    return {
      orderinfo: {
        orderLogisticsList: [],
      },
      refundinfo: {},
    };
  },
  onLoad() {
    let orderinfo = getStorage("orderinfo");
    let refundinfo = getStorage("refundinfo");
    this.orderinfo = orderinfo;
    this.refundinfo = refundinfo;
    console.log(orderinfo);
    console.log(refundinfo);
  },
  methods: {
    gourl(url) {
      uni.redirectTo({
        url,
      });
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  padding: 32rpx 24rpx 1rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .list {
    margin: 0 0 30rpx 0;

    .img {
      width: 180rpx;
      height: 180rpx;
      border-radius: 28rpx;
    }

    .block1 {
      height: 160rpx;
      width: calc(100% - 180rpx - 20rpx);
      margin-left: 20rpx;

      .info1 {
      }

      .info2 {
        margin: 16rpx 0;
      }

      .info3 {
      }
    }
  }
}

.infobox2 {
  padding: 32rpx 24rpx 1rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .block1 {
  }

  .block2 {
    border-bottom: 1px solid #f5f5f5;
    padding: 32rpx 0;

    .img {
      width: 88rpx;
      height: 88rpx;
    }

    .info1 {
      margin-left: 20rpx;
      width: calc(100% - 88rpx);

      .tip1 {
      }

      .tip2 {
        margin: 16rpx 0 0;
      }
    }
  }
}
</style>
